<template>
  <el-select v-model="id" clearable placeholder="选择学生类别" @change="handleChange" filterable >
    <el-option
      v-for="item in list"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>

</template>
<script setup lang="ts">

interface IStudentType{
  id:string,
  name:string
}

import {ref,watch,defineProps,defineEmits,onMounted} from 'vue'

const list = ref<IStudentType[]>([]);
const id = ref<string>('');

const props =  defineProps({
  modelValue:{
    type:String,
    required:true
  },
  type:{
    type:String,
    default:''
  }
});

const emits =  defineEmits(['update:modelValue','updateLabel']);

watch(()=>props.modelValue,(newVal)=>{
  id.value = newVal;
});


onMounted(()=>{
  id.value = props.modelValue;

  list.value = [
    {name:'博士',id:'1'},
    {name:'硕士',id:'2'},
    {name:'本科生',id:'3'},
    {name:'职教生',id:'4'},
    {name:'成教生',id:'5'},
  ];

  if(id.value == null){
        if(list.value.length == 1){
          id.value = list.value[0].id;
          emits('update:modelValue', id.value);
        }
   } 
    
    
});


function  handleChange(theValue:string) {
      
      emits('update:modelValue', theValue);
      
      var label = '';
      list.value.forEach(ele=>{
        if(ele.id == theValue){
          label = ele.name;
        }
      });

      emits('updateLabel', label);
    }

</script>
